<template>
	<view class="inspect">
		<!-- #ifdef APP-PLUS -->
		<top-set></top-set>
		<tab-top fixed="true" title="异常检测"></tab-top>
		<!-- #endif -->
		<view class="content">
			<view class="content_title">
				<view class="title_left">
					<canvas canvas-id="fCanvas">
						<view class="canvas_title"><text class="ct_1">{{percentageNum}}</text><text class="ct_2">%</text></view>
						<view class="canvas_content" v-if="percentageNum!='100.0'">检测中...</view>
						<view class="canvas_content" v-else>检测完成</view>
					</canvas>
				</view>
				<view class="title_right">
					<view class="text1" v-if="inspectNum != '0'">
						<text class="remind">{{inspectNum}}</text>项异常
					</view>
					<view class="text1" v-else>
						没有项异常
					</view>
					<view class="text2" v-if="inspectNum != '0'">
						系统无法保障您的接单权益,请按异常提示完成调整
					</view>
					<view class="text2" v-else>
						恭喜您接单功能没有任何异常,系统将保证您的接单权益
					</view>
					<view class="text3" @tap="firstCanvas">
						重新检测
					</view>
				</view>
			</view>
			<view class="box1">
				<view class="box_title">
					<text>基本信息</text>
				</view>
				<view class="list">
					<view class="item">
						<view class="text1">
							<image v-if="userAuth == '0'|| userAuth == '-1'" src="/static/icon/jingao.png"></image>
							<image v-if="userAuth == '1'" src="/static/icon/adopt.png">

							</image>
						</view>
						<view class="text2">实名认证</view>
						<view v-if="userAuth == '0'" class="text3">检测中</view>
						<view v-else-if="userAuth == '-1'" class="text3">未实名</view>
						<view v-else-if="userAuth == '1'" class="text3">已实名</view>

					</view>
					<view class="item">
						<view class="text1">
							<image v-if="healthCertificateAuth == '0'|| healthCertificateAuth == '-1'" src="/static/icon/jingao.png"></image>
							<image v-if="healthCertificateAuth == '1'" src="/static/icon/adopt.png">

							</image>
						</view>
						<view class="text2">健康认证</view>
						<view v-if="healthCertificateAuth == '0'" class="text3">检测中</view>
						<view v-else-if="healthCertificateAuth == '-1'" class="text3">未认证</view>
						<view v-else-if="healthCertificateAuth == '1'" class="text3">已认证</view>
					</view>
				</view>
			</view>
			<view class="box2">
				<view class="box_title">
					<text>本机状态</text>
				</view>
				<view class="list">
					<view class="item">
						<view class="text1">
							<image v-if="timeAuth == '0'|| timeAuth == '-1'" src="/static/icon/jingao.png"></image>
							<image v-if="timeAuth == '1'" src="/static/icon/adopt.png">

							</image>
						</view>
						<view class="text2">本机时间</view>
						<view v-if="timeAuth == '0'" class="text3">检测中</view>
						<view v-else-if="timeAuth == '-1'" class="text3">有误差</view>
						<view v-else-if="timeAuth == '1'" class="text3">已检测</view>
					</view>
					<view class="item">
						<view class="text1">
							<image src="/static/icon/jingao.png" v-if="network == '0' || network == '-1'"></image>
							<image src="/static/icon/adopt.png" v-else-if="network == '1'"></image>
						</view>
						<view class="text2">网络</view>
						<view v-if="network == '0'" class="text3">检测中</view>
						<view v-else-if="network == '-1'" class="text3">未开启</view>
						<view v-else-if="network == '1'" class="text3">已开启</view>
					</view>
					<view class="item" @tap="openGps">
						<view class="text1">
							<image v-if="gpsHave == '0' || gpsHave == '-1'" src="/static/icon/jingao.png"></image>
							<image v-else-if="gpsHave == '1'" src="/static/icon/adopt.png"></image>
						</view>
						<view class="text2">GPS定位</view>
						<view v-if="gpsHave == '0'" class="text3">检测中</view>
						<view v-else-if="gpsHave == '-1'" class="text3">未开启</view>
						<view v-else-if="gpsHave == '1'" class="text3">已开启</view>
					</view>


					<view class="item">
						<view class="text1">
							<image v-if="volumeHave == '0' || volumeHave == '-1'" src="/static/icon/jingao.png"></image>
							<image v-else-if="volumeHave == '1'" src="/static/icon/adopt.png">

							</image>
						</view>
						<view class="text2">铃声</view>
						<view v-if="volumeHave == '0'" class="text3">检测中</view>
						<view v-else-if="volumeHave == '-1'" class="text3">未开启</view>
						<view v-else-if="volumeHave == '1'" class="text3">已开启</view>
					</view>

				</view>



			</view>
		</view>
	</view>
</template>

<script>
	let flag = false;
	export default {

		data() {
			return {
				percentage: 0, //进度百分比
				progressBar: 0, //进度条
				progressText: '检测中...',
				network: '0', //网络
				gpsHave: '0', //定位
				volumeHave: '0', //设备铃声
				userAuth: '0', //实名认证
				healthCertificateAuth: '0', //健康证认证
				timeAuth: '0', //时间认证
				inspectNum: 6 //默认检测项
			}
		},
		methods: {
			async firstCanvas() {

				if (flag) {
					return;
				}
				flag = true;
				let onePercentage = 100 / 6;
				this.network = '0';
				this.gpsHave = '0';
				this.volumeHave = '0';
				this.userAuth = '0';
				this.healthCertificateAuth = '0';
				this.timeAuth = '0';

				this.inspectNum = 6;
				this.progressBar = 0;
				let context = uni.createCanvasContext('fCanvas');

				let _Calculation = (num) => {

					console.log(this.inspectNum);
					this.progressBar = this.progressBar + num;

					context.setStrokeStyle("#ff0909");
					context.setLineWidth(uni.upx2px(9));
					context.stroke();
					console.log(this.progressBar);
					// console.log(1.5-( this.progressBar / 3));
					context.arc(uni.upx2px(90), uni.upx2px(90), uni.upx2px(80), 1.5 * Math.PI, (1.5 - (this.progressBar / 3)) * Math
						.PI, true);

					context.stroke();
					context.draw();

				}







				_Calculation(0);


				let res = await this.testing();

				console.log(res);
				if (res.status == 1) {



					if (res.data.user_auth == 1) {
						this.userAuth = '1';
						this.inspectNum = this.inspectNum - 1;
					} else {
						this.userAuth = '-1';
					}

					_Calculation(1);



					if (res.data.healthCertificateAuth == 1) {
						this.healthCertificateAuth = '1';
						this.inspectNum = this.inspectNum - 1;
					} else {
						this.healthCertificateAuth = '-1';
					}
					_Calculation(1);


					let timestamp = Date.parse(new Date()) / 1000;
					let timeAbs = Math.abs(timestamp - res.data.server_time);
					if (timeAbs > 300) {
						this.timeAuth = '-1';
					} else {
						this.timeAuth = '1';
						this.inspectNum = this.inspectNum - 1;
					}
					_Calculation(1);


				} else {
					_Calculation(3)



					this.userAuth = '-1';
					this.timeAuth = '-1';
					this.healthCertificateAuth = '-1';
				}


				let netWork = await this.getNetWork();
				_Calculation(1);
				if (netWork.networkType != 'none') {
					this.network = '1';
					this.inspectNum = this.inspectNum - 1;
				} else {
					this.network = '-1';
				}

				let GPSService = await this.checkOpenGPSService()
				_Calculation(1);
				if (GPSService) {
					this.gpsHave = '1';
					this.inspectNum = this.inspectNum - 1;
				} else {
					this.gpsHave = '-1';
				}



				// #ifdef APP-PLUS
				let volume = await this.getVolume();
				_Calculation(1);
				if (volume) { 
					this.volumeHave = '1';
					this.inspectNum = this.inspectNum - 1;
				} else {
					this.volumeHave = '-1';
				}
				// #endif



				if (this.inspectNum == 0) {
					context.setStrokeStyle("#3595f9");
					context.setLineWidth(uni.upx2px(9));
					context.stroke();
					// console.log(this.progressBar);
					// console.log(1.5-( this.progressBar / 3));
					context.arc(uni.upx2px(90), uni.upx2px(90), uni.upx2px(80), 1.5 * Math.PI, (-0.5) * Math.PI, true);

					context.stroke();
					context.draw();
				}


				flag = false;
			},
			initialization() {

			},
			/**
			 * 获取网络状态
			 */
			getNetWork() {
				return new Promise(res => {
					setTimeout(() => {
						uni.getNetworkType({
							complete: (data) => {
								res(data);
							}
						})
					}, 1000);
				})

			},
			/**
			 * 获取GPS状态
			 */
			checkOpenGPSService() {
				return new Promise((res) => {
					setTimeout(() => {
						let system = uni.getSystemInfoSync(); // 获取系统信息
						if (system.platform === 'android') { // 判断平台
							let context = plus.android.importClass("android.content.Context");
							let locationManager = plus.android.importClass("android.location.LocationManager");
							let main = plus.android.runtimeMainActivity();
							let mainSvr = main.getSystemService(context.LOCATION_SERVICE);
							if (!mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER)) {
								res(false);
							} else {
								res(true);
							}
						} else {
							res(true);
						}

					}, 1000);
				});




			},
			/**
			 * 打开GPS 操作系统
			 */
			openGps() {
				let system = uni.getSystemInfoSync(); // 获取系统信息
				if (system.platform != 'android') {
					return;
				}
				if (this.gpsHave == '-1') {
					let main = plus.android.runtimeMainActivity();
					let Intent = plus.android.importClass('android.content.Intent');
					let Settings = plus.android.importClass('android.provider.Settings');
					let intent = new Intent(Settings.ACTION_LOCATION_SOURCE_SETTINGS);
					main.startActivity(intent); // 打开系统设置GPS服务页面
				}

			},
			/**
			 * 获取设备音量
			 */
			getVolume() {
				return new Promise((res) => {
					setTimeout(() => {

						let volume = plus.device.getVolume();
						if (volume == 0) {
							res(false);
						} else {
							res(true);
						}

					}, 1000);


				});


			},
			/**
			 * 获取基础信息
			 */
			testing() {
				return new Promise((res) => {
					this.req({
						url: 'api/testing',
						method: 'get',
						data: {
							id: this.isLogin().id
						}
					}, (data) => {
						res(data.data);
					})
				});
			}
		},
		mounted() {

		},
		onShow() {
			this.firstCanvas();
		},
		computed: {
			percentageNum() {
				return Number((this.progressBar / 6) * 100).toFixed(1);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inspect {
		.content {
			.content_title {
				height: 283upx;
				width: 100%;
				border-bottom: 20upx solid #f0f0f0;

				.title_left,
				.title_right {
					float: left;
					height: 100%;
				}

				.title_left {
					width: 190upx;
					height: 190upx;
					margin-top: 42upx;
					margin-left: 62upx;

					canvas {
						width: 100%;
						height: 100%;
					}

					.canvas_title {
						margin-top: 53upx;
						text-align: center;

						.ct_1 {
							color: #333333;
							font-size: 36upx;
							line-height: 1;
						}

						.ct_2 {
							font-size: 18upx;
							color: #999999;
							line-height: 1;
						}
					}

					.canvas_content {
						text-align: center;
						margin-top: 5upx;
						font-size: 28upx;
						line-height: 1;
						color: #999999;
					}
				}

				.title_right {
					width: 406upx;
					height: 190upx;

					margin-top: 42upx;
					margin-left: 56upx;

					.text1 {
						font-size: 34upx;
						line-height: 1;
						color: #333333;

						.remind {
							color: #f93735;
						}
					}

					.text2 {
						margin-top: 13upx;
						line-height: 36upx;
						font-size: 24upx;
						color: #333333;
					}

					.text3 {
						margin-top: 15upx;
						border: solid 2upx #3595f9;
						text-align: center;
						line-height: 60upx;
						width: 160upx;
						height: 60upx;
						font-size: 24upx;
						color: #3595f9;
						border-radius: 8upx;
					}
				}

			}

		}

		.box1 {
			width: 100%;

			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 20upx solid #f0f0f0;
		}

		.box2 {
			width: 100%;

			box-sizing: border-box;
			padding-top: 50upx;
			border-bottom: 20upx solid #f0f0f0;
		}

		.box_title {
			width: 100%;
			height: 34upx;
			color: #333333;
			font-size: 32upx;
			line-height: 1;

			text {
				margin-left: 24upx;
			}
		}

		.list {

			.item {
				height: 101upx;
				margin-left: 24upx;
				width: calc(100% - 48upx);
				position: relative;

				.text1,
				.text2 {
					float: left;
				}

				.text2,
				.text3 {
					margin-top: 37upx;
					font-size: 28upx;
					line-height: 1;

				}

				.text1 {
					margin-top: 34upx;
					width: 30upx;
					height: 30upx;
					margin-right: 18upx;

					image {
						float: left;
						width: 100%;
						height: 100%;
					}
				}

				.text2 {
					color: #333333;
				}

				.text3 {
					float: right;
					color: #999999;
				}


			}

			.item:after {
				position: absolute;
				content: '';
				left: 0;
				bottom: 0;
				background: #e5e5e5;
				width: 100%;
				height: 1upx;
				transform: scaleY(0.5);
			}

			.item:nth-last-of-type(1):after {
				content: none;
			}
		}
	}
</style>
